<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>小马技术 | Chart.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/myweb/style/main.css" />
    <script src="/myweb/chartjs/Chart.bundle.js"></script>
</head>

<body>
    <canvas id="myChart">
        图表区
    </canvas>

    <script>
        (function () {
            'use strict';

            var type = 'line';
            var data = {
                labels: [2014, 2015, 2016, 2017, 2018],
                datasets: [
                    {
                        label: '优酷',
                        data: [100, 200, 400, 800, 1600]
                    },
                    {
                        label: 'Youtube',
                        data: [50, 100, 200, 400, 600]
                    }
                ]
            };

            var options = {
                scales: {
                    yAxes: [{
                        ticks: {
                            min: 0,
                            max: 2000
                        }
                    }]
                },
                title: {
                    display: true,
                    text: '小马视频',
                    fontColor: 'green',
                    fontSize: '24',
                    position: 'top', //top,left,bottom,right
                },
                legend: {
                    position: 'left',
                    diaplay: true
                },
                animation: {
                    duration: 0,
                    easing: 'easeOutQuart', //easeOutQuart, easeInBounce, ...
                }
            };

            var ctx = document.getElementById('myChart').getContext('2d');
            var chart = new Chart(ctx, {
                type: type,
                data: data,
                options: options
            });
        })();
    </script>
</body>

</html>